import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const ToolTipView = defineView({
  controller: "TooltipDemoCtrl",
  controllerAs: "$ctrl",
  template: /* HTML */ html`
    <div class="w-[80%] mx-auto">
      <div class="form-group">
        <label>Tooltip placement</label>
        <select
          class="form-control"
          ng-model="$ctrl.placement.selected"
          ng-options="o as o for o in $ctrl.placement.options"
        ></select>
      </div>
      <button
        tooltip-placement="{{$ctrl.placement.selected}}"
        uib-tooltip="On the {{$ctrl.placement.selected}}"
        type="button"
        class="btn btn-default"
      >
        Tooltip {{$ctrl.placement.selected}}
      </button>

      <hr />
      <div class="form-group">
        <label>Dynamic Tooltip Text</label>
        <input
          type="text"
          ng-model="$ctrl.dynamicTooltipText"
          class="form-control"
        />
      </div>
      <div class="form-group">
        <label>Dynamic Tooltip Popup Text</label>
        <input
          type="text"
          ng-model="$ctrl.dynamicTooltip"
          class="form-control"
        />
      </div>
      <p>
        Pellentesque
        <a href="#" uib-tooltip="{{$ctrl.dynamicTooltip}}"
          >{{$ctrl.dynamicTooltipText}}</a
        >, sit amet venenatis urna cursus eget nunc scelerisque viverra mauris,
        in aliquam. Tincidunt lobortis feugiat vivamus at
        <a href="#" tooltip-animation="false" uib-tooltip="I don't fade. :-("
          >fading</a
        >
        eget arcu dictum varius duis at consectetur lorem. Vitae elementum
        curabitur
        <a href="#" tooltip-popup-delay="1000" uib-tooltip="appears with delay"
          >show delay</a
        >
        nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
        <a
          href="#"
          tooltip-popup-close-delay="1000"
          uib-tooltip="hides with delay"
          >hide delay</a
        >
        pharetra convallis posuere morbi leo urna,
        <a href="#" uib-tooltip-template="'myTooltipTemplate.html'"
          >Custom template</a
        >
        at elementum eu, facilisis sed odio morbi quis commodo odio.
      </p>

      <p>
        I can even contain HTML as a
        <a href="#" uib-tooltip-html="$ctrl.htmlTooltip">scope variable</a> or
        <a
          href="#"
          uib-tooltip-html="'static. {{$ctrl.dynamicTooltipText}}. <b>bold.</b>'"
          >inline string</a
        >
      </p>

      <p>
        <style>
          /* Specify styling for tooltip contents */
          .tooltip.customClass .tooltip-inner {
            color: #880000;
            background-color: #ffff66;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
          }
          /* Hide arrow */
          .tooltip.customClass .tooltip-arrow {
            display: none;
          }
        </style>
        I can have a custom class.
        <a
          href="#"
          uib-tooltip="I can have a custom class applied to me!"
          tooltip-class="customClass"
          >Check me out!</a
        >
      </p>

      <div class="form-group">
        <label>Or use custom triggers, like focus: </label>
        <input
          type="text"
          value="Click me!"
          uib-tooltip="See? Now click away..."
          tooltip-trigger="'focus'"
          tooltip-placement="right"
          class="form-control"
        />
      </div>

      <div class="form-group" ng-class="{'has-error' : !inputModel}">
        <label>Disable tooltips conditionally:</label>
        <input
          type="text"
          ng-model="inputModel"
          class="form-control"
          placeholder="Hover over this for a tooltip until this is filled"
          uib-tooltip="Enter something in this input field to disable this tooltip"
          tooltip-placement="top"
          tooltip-trigger="'mouseenter'"
          tooltip-enable="!inputModel"
        />
      </div>
      <div class="form-group">
        <label>
          Open tooltips
          <span
            uib-tooltip="Hello!"
            tooltip-is-open="tooltipIsOpen"
            tooltip-placement="bottom"
            >conditionally.</span
          >
        </label>
        <button ng-click="tooltipIsOpen = !tooltipIsOpen">
          Toggle tooltip
        </button>
      </div>
      <script type="text/ng-template" id="myTooltipTemplate.html">
        <span>Special Tooltip with <strong>markup</strong> and {{ $ctrl.dynamicTooltipText }}</span>
      </script>
    </div>
  `,
});

export default ToolTipView;
